import Cubox from '../Cubox';
import styles from './button.module.css';

import colorScheme from '../assets/color-scheme';

const Button = ({isOutlined, isDisabled, color:initColor='blue', type, className, style, onClick, children}) => {

  const color = {prim: 'blue', warn: 'yellow', dang: 'red', info: 'cyan'}[type] ?? initColor;

  const [back, fore, text] = isOutlined
    ? [color, 'base00', color]
    : [color, color, 'base00']

  const opacity = isDisabled ? 0.5 : 1;

  const QBOXProps = {
		cornerRadius: 20, 
		strokeWidth: 1, 
		isOutlined,
		backColor: colorScheme[back],
		foreColor: colorScheme[fore],
    opacity,
    onClick,
	};

  const buttonStyle = {
    color:colorScheme[text],
    opacity,
  }

  return <Cubox {...QBOXProps} >
    <div {...{className:`${styles['button']} ${className}`, style: {...buttonStyle, ...style}}}>{children}</div>
  </Cubox>
}

export default Button;